{extend name="index/head" /}

{block name="link"}
<link rel="stylesheet" href="__STATIC__/index/css/huzixun.css">
<link rel="stylesheet" href="__STATIC__/index/css/head.css">
<link rel="stylesheet" href="__STATIC__/index/css/huwangjimima.css">
{/block}
{block name="main"}

<div id="contentsd" v-cloak>
<div>
    <div>
     忘记密码
    </div>

    <div>
        <img  v-if="state==0"  :src="liuchengy" />
        <img v-else-if="state==1" :src="liuchenge" />
        <img v-else  :src="liuchengs" />
    </div>


    <div class="neis"  v-if="state==0">
        <div>
            <div class="yi">
                <div>*手机号</div>
                <input  placeholder="请输入手机号"  />
            </div>
            <div class="er">
                <div>*验证码</div>
                <input  placeholder="请输入手机号"  />
                <div>发送验证码</div>
            </div>
            <div @click="nextf"  class="dnext">下一步</div>
        </div>
    </div>


    <div class="neis"  v-if="state==1">
        <div>
            <div class="yi">
                <div>*设置新密码</div>
                <input  placeholder="请输入新密码"  />
            </div>
            <div class="yi">
                <div>*确认新密码</div>
                <input  placeholder="请再次输入新密码"  />
            </div>
            <div @click="nextff"  class="dnext">下一步</div>
        </div>
    </div>


    <div class="neid"  v-if="state==2">
             <img :src="gous" />
             <div>密码重置成功！</div>
             <div>2秒后自动跳转到首页，如未跳转，可<a  href="index.html">立即跳转</a>！</div>
    </div>


</div>





</div>


{/block}


{block name="js"}
<script src="__STATIC__/index/js/jquery.3.3.1.min.js"></script>
<script src="__STATIC__/index/js/vue.js"></script>
<script src="__STATIC__/index/js/Page.js"></script>
{/block}

{block name="xia"}
<script>

    new Vue({
        el: "#contentsd",
        data: {
            state:0,
            liuchengs:"__STATIC__/index/img/liucheng1.png",   // 第三部验证 2
            liuchenge:"__STATIC__/index/img/liucheng2.png",  //第二步验证  1
            liuchengy:"__STATIC__/index/img/liucheng3.png", // 第一步验证 0
            gous:"__STATIC__/index/img/gous.png",  //确认
        },
        methods: {
           // 下一步
            nextf:function () {
            this.state=1
            },
            // 再下一步
            nextff:function () {
            this.state=2
            }
            
        },
        created() {
        },
        mounted() {

        }
    })



</script>
{/block}

